<template>
  <div>
    <van-nav-bar title="订单" @click-left="back" left-arrow />
    <van-tabs v-model="active" @change="chage">
      <van-tab title="全部">
         <van-notice-bar left-icon="volume-o">谨防网络及客服诈骗！国美不会以订单异常、系统维护等情况为由，要求您进行退款操作！</van-notice-bar>
        <van-row>
          <van-row style="background-color:#ffffff;padding:12px 0;margin-top:10px">
            <van-col span="2">
              <van-image src="//gfs11.gomein.net.cn/T18GDvB_hg1RCvBVdK.png" />
            </van-col>
            <van-col span="20" style="font-size:15px;font-weight:800">
              国美自营
              <span style="float:right;font-size:13px;color:#f6598e">商品出库中</span>
            </van-col>
          </van-row>
          <van-card
            style="background-color:#ffffff;margin-top:-1px"
            v-for="(item,index) in quanbu"
            :key="index"
            :num="item.price"
            :title="item.goods_name"
            :thumb="item.image"
          >
            <div slot="footer">
              <van-row>
                <div style="float:right;font-size:11px;color:#a1a1a1">
                  共
                  <span style="font-size:14px;color:black">1</span> 件商品，支付
                  <span style="font-size:16px;color:black;font-weight:700">￥{{item.price}}</span>
                </div>
              </van-row>
            </div>
            <div slot="footer" style="margin-top:20px">
              <van-button
              @click="qxorder(item.id)"
                style="border:1px solid #f4f4f5;border-radius:20px 20px;color:#818181;font-size:14px"
                size="small"
              >取消订单</van-button>
              <van-button
                style="border:1px solid #f4437e;border-radius:20px 20px;color:#f4437e;font-size:14px"
                size="small"
              >订单状态</van-button>
            </div>
          </van-card>
        </van-row>
      </van-tab>
      <van-tab title="待付款">
        <van-notice-bar left-icon="volume-o">谨防网络及客服诈骗！国美不会以订单异常、系统维护等情况为由，要求您进行退款操作！</van-notice-bar>
        <van-row>
          <van-row style="background-color:#ffffff;padding:12px 0;margin-top:10px">
            <van-col span="2">
              <van-image src="//gfs11.gomein.net.cn/T18GDvB_hg1RCvBVdK.png" />
            </van-col>
            <van-col span="20" style="font-size:15px;font-weight:800">
              国美自营
              <span style="float:right;font-size:13px;color:#f6598e">商品出库中</span>
            </van-col>
          </van-row>
          <van-card
            style="background-color:#ffffff;margin-top:-1px"
            v-for="(item,index) in goodsLista"
            :key="index"
            :num="item.price"
            :title="item.goods_name"
            :thumb="item.image"
          >
            <div slot="footer">
              <van-row>
                <div style="float:right;font-size:11px;color:#a1a1a1">
                  共
                  <span style="font-size:14px;color:black">1</span> 件商品，支付
                  <span style="font-size:16px;color:black;font-weight:700">￥{{item.price}}</span>
                </div>
              </van-row>
            </div>
            <div slot="footer" style="margin-top:20px">
              <div>
                <span style="float:left;font-size:15px;margin-right:10px">订单剩余时间:</span>
              <van-count-down style="float:left" :time="time">
                <template  v-slot="timeData">
                  <span class="item">{{ timeData.hours }}</span>:
                  <span class="item">{{ timeData.minutes }}</span>:
                  <span class="item">{{ timeData.seconds }}</span>
                </template>
              </van-count-down>
              </div>
              <van-button
              @click="qxorder(item.id)"
                style="border:1px solid #f4f4f5;border-radius:20px 20px;color:#818181;font-size:14px"
                size="small"
              >取消订单</van-button>
              <van-button
                style="border:1px solid #f4437e;border-radius:20px 20px;color:#f4437e;font-size:14px"
                size="small"
                @click="payord"
              >立即支付</van-button>
            </div>
          </van-card>
        </van-row>
      </van-tab>
      <van-tab title="待收货">
        <van-notice-bar left-icon="volume-o">谨防网络及客服诈骗！国美不会以订单异常、系统维护等情况为由，要求您进行退款操作！</van-notice-bar>
        <van-row>
          <van-row style="background-color:#ffffff;padding:12px 0;margin-top:10px">
            <van-col span="2">
              <van-image src="//gfs11.gomein.net.cn/T18GDvB_hg1RCvBVdK.png" />
            </van-col>
            <van-col span="20" style="font-size:15px;font-weight:800">
              国美自营
              <span style="float:right;font-size:13px;color:#f6598e">商品出库中</span>
            </van-col>
          </van-row>
          <van-card
            style="background-color:#ffffff;margin-top:-1px"
            v-for="(item,index) in goodsList"
            :key="index"
            :num="item.price"
            :title="item.goods_name"
            :thumb="item.image"
          >
            <div slot="footer">
              <van-row>
                <div style="float:right;font-size:11px;color:#a1a1a1">
                  共
                  <span style="font-size:14px;color:black">1</span> 件商品，支付
                  <span style="font-size:16px;color:black;font-weight:700">￥{{item.price}}</span>
                </div>
              </van-row>
            </div>
            <div slot="footer" style="margin-top:20px">
              <van-button
                style="border:1px solid #f4f4f5;border-radius:20px 20px;color:#818181;font-size:14px"
                size="small"
              >订单跟踪</van-button>
              <van-button
               @click="qxorder(item.id)"
                style="border:1px solid #f4437e;border-radius:20px 20px;color:#f4437e;font-size:14px"
                size="small"
              >取消订单</van-button>
            </div>
          </van-card>
        </van-row>
      </van-tab>
      <van-tab title="已完成"></van-tab>
      <van-tab title="已取消"></van-tab>
    </van-tabs>
    <van-action-sheet class="sheet" v-model="show" title="取消订单">
      <div @click="xq()">
    <p>添加或删除商品</p>
    <p>订单信息有误</p>
    <p>送货时间太长</p>
    <p>价格比其他平台贵</p>
    <p>忘记使用优惠卷、美豆</p>
    <p>该商品降价了</p>
    <p>重复下单/误下单</p>
    <p>支付遇到问题</p>
    </div>
</van-action-sheet>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: false,
      active: 2,
      userid: 2,
      goodsList: [],
      goodsLista: [],
      time: 30 * 60 * 60 * 1000,
      id: 0,
      quanbu: []
    }
  },
  methods: {
    //   返回上一级
    back () {
      this.$router.push('/') // 返回上一层
    },
    async getorders () {
      const { data: res } = await this.$http.post('/orderse', {
        userid: this.userid
      })
      this.goodsList = res.data
      // console.log(this.goods_list)
    },
    async getnollorder () {
      const { data: res } = await this.$http.post('/orderses', {
        userid: this.userid
      })
      this.goodsLista = res.data
      // console.log(this.goods_list)
    },
    payord () {
      this.$router.push('/pay')
    },
    // 取消订单原因
    xq () {
      this.$http.get('/qxorder', { params: { id: this.id } }).then(res => {
        if (res.data.ok === 1) {
          this.$toast('取消订单成功')
          this.getnollorder()
        }
      })
      this.show = false
    },
    qxorder (id) {
      this.id = id
      this.show = true
    },
    getshow () {
      this.$http.post('/showorder', { id: this.userid }).then(res => {
        this.quanbu = res.data.data
      })
    },
    chage () {
      if (this.active === 0) {
        this.getshow()
      }
    }
  },
  created () {
    let userid = sessionStorage.getItem('userid')
    if (userid) {
      this.userid = userid
    }
    this.getorders()
    this.active = Number(sessionStorage.getItem('active'))
    this.getnollorder()
  }
}
</script>

<style scoped>
.van-nav-bar .van-icon {
  color: #333;
  font-size: 25px;
}
.item {
  display: inline-block;
  width: 22px;
  margin-right: 5px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: black;
}
.sheet p{
  padding: 10px
}
</style>
